<template>
	<div class="index">

		<div class="center">
			<left></left>
			<div class="right">
          <top></top>
          <!-- <div class="hei10"></div>
          <div class="where" style="background: #fff; padding: 10px 30px; font-size: 14px; color: #595959;">当前位置：分销后台>短信中心><router-link to="/duanxin/fasongjilu">发送记录</router-link></div>
          --><div class="hei10"></div>

        <div class="powertop">

          <router-link class="powertopli " to="/duanxin">任务管理</router-link>
          <router-link class="powertopli " to="/duanxin/addrenwu2">指定号码发送短信</router-link>
          <router-link class="powertopli powertopact" to="/duanxin/fasongjilu">发送记录</router-link>
          <router-link class="powertopli" to="/duanxin/duanxinmoban">短信模板管理</router-link>
        </div>
        <div class="conlist" v-loading='loading'>
          <div class="flex flexbt renguantop">
            <el-form ref="form" @submit.native.prevent v-model="form" label-width="80px" class="flex">
              <el-form-item label="类别:">
                <el-select v-model="classs" placeholder="请选择">
                  <el-option label="下单提醒" value="120"></el-option>
                  <el-option label="照片未上传提醒" value="150"></el-option>
                  <el-option label="照片不合格提醒" value="-200"></el-option>
                  <el-option label="生产失败通知" value="-460"></el-option>
                  <el-option label="待发货" value="500"></el-option>
                  <el-option label="已发货提醒" value="550"></el-option>
                  <el-option label="已激活" value="700"></el-option>
                  <el-option label="群发短信" value="789"></el-option>
                  <el-option label="外呼短信" value="888"></el-option>
                  <el-option label="订单终止" value="0"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="发送状态:">
                <el-select v-model="status" placeholder="请选择">
                  <el-option label="发送失败" value="-1"></el-option>
                  <el-option label="发送中" value="0"></el-option>
                  <el-option label="发送成功" value="1"></el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="任务名称">
                <el-input v-model="name"></el-input>
              </el-form-item>
              <el-form-item label="手机号码">
                <el-input v-model="mobile"></el-input>
              </el-form-item>
              <!-- <el-form-item label="发送状态:">
                                <el-select v-model="status"  placeholder="请选择">
                                    <el-option label="已发送" value="1"></el-option>
                                    <el-option label="待发送" value="0"></el-option>
                                </el-select>
                            </el-form-item> -->
              <el-form-item label="发送时间:">
                <el-date-picker @change="timechange" v-model="time" :clearable="false" value-format="yyyy-MM-dd"
                  type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
              </el-form-item>
              <el-button type="danger" round @click="search" style="margin-left: 20px; height: 40px !important;">搜索
              </el-button>

              <el-button type="danger" round  @click="search2" style="margin-left: 20px; height: 40px !important;">导出发送记录
              </el-button>

              <el-button type="text" round  @click="daochujilu" style="margin-left: 20px; height: 40px !important;">查看导出文件
              </el-button>
            </el-form>
          </div>

          <div class="list listth flex">
            <div class="th">类别</div>
            <div class="th">任务名称</div>
            <div class="th">订单ID</div>
            <div class="th">手机号码</div>
            <div class="th">短信内容</div>
            <div class="th">发送时间</div>
            <div class="th">发送状态</div>
            <div class="th">实际扣费（条）</div>
          </div>
          <div class="list listtd flex" v-for="item in list" :key="item.id">
            <div class="td" v-if="item.class == 120">下单提醒</div>
            <div class="td" v-if="item.class == 789">群发短信</div>
            <div class="td" v-if="item.class == 150">照片未上传提醒</div>
            <div class="td" v-if="item.class == -200">照片不合格提醒</div>
            <div class="td" v-if="item.class == -451">初审失败</div>
            <div class="td" v-if="item.class == -460">生产失败通知</div>
            <div class="td" v-if="item.class == 500">待发货</div>
            <div class="td" v-if="item.class == 550">已发货提醒</div>
            <div class="td" v-if="item.class == 700">已激活</div>
            <div class="td" v-if="item.class == 800">激活且充值</div>
<div class="td" v-if="item.class == 0">订单终止</div>
<div class="td" v-if="item.class == 888">外呼短信</div>
<div class="td" v-if="item.class == 889">91fen短信</div>


            <div class="td">
              <el-tooltip effect="dark" popper-class="tooltip" placement="top">
                <div slot="content">{{item.name}}</div>
                <div>{{item.name}}</div>
              </el-tooltip>
            </div>
            <div class="td">{{item.order_id}}</div>
            <div class="td">{{item.mobile}}</div>
            <div class="td">
              <el-tooltip effect="dark" popper-class="tooltip" placement="top">
                <div slot="content">{{item.content}}</div>
                <div>{{item.content}}</div>
              </el-tooltip>
            </div>
            <div class="td">{{item.created_at}}</div>
            <div class="td" v-if="item.status == 1">发送成功</div>
            <div class="td" v-if="item.status == -1">发送失败</div>
            <div class="td" v-if="item.status == 0">发送中</div>
            <div class="td">{{item.fee}}</div>
          </div>
          <el-pagination style="text-align: right; padding: 20px;" background layout="total,prev, pager, next"
            :current-page="page" @current-change="fanye" :page-size="pagesize" :total="total"></el-pagination>
        </div>
      </div>
    </div>

    <el-dialog title="添加模板" center :visible.sync="log" :close-on-press-escape="false" :close-on-click-modal="false"
     width="800px">

    <div class="flex" style=" background: rgba(0,0,0,0.1); padding:10px 20px; margin-bottom: 20px;" v-for="item in list2" :key="item.id">
      <div style="margin-bottom: 0;">操作人：{{item.name}}</div>

      <div style="margin-bottom: 0;">生成时间：{{item.created_at}}</div>

      <div style="margin-bottom: 0;" v-if="item.status != -1">
        <el-button type="primary" v-if="item.status == 2"  size="mini" @click="xiazai(item.local_filename)">下载数据</el-button>
        <el-button type="primary" v-if="item.status != 2" :loading="true" size="mini">数据生成中,请稍后刷新页面</el-button>
      </div>
      <div style="margin-bottom: 0;" v-if="item.status == -1"><el-button type="text" size="mini" >异常,联系技术解决</el-button></div>
    </div>

    	<span slot="footer" class="dialog-footer">
    		<el-button type="info"  round  @click="log = false" >关闭</el-button>
    	</span>
    </el-dialog>

    <!-- <foot></foot> -->
  </div>

</template>

<script>
  import axios from 'axios'
  import top from '@/components/top.vue'
  import left from '@/components/left.vue'
  import foot from '@/components/foot.vue'
  import moment from "moment";
  export default {
    components: {
      "left": left,
      "top": top,
      "foot": foot,
    },
    name: "fasongjilu",
    data() {
      return {
        total: 0,
        pagesize: 20,
        page: 1,
        list: "",
        loading: true,
        classs: "",
        name: "",
        status: "",
        time: "",
        mobile: "",
        start: "",
        end: "",
        form: "",
        log:false,
        list2:""
      }
    },
    created() {

      this.getlist()
    },
    mounted() {

    },
    methods: {
      timechange: function() {
        this.start = this.time[0]
        this.end = this.time[1]
      },
      search: function() {
        this.getlist()
      },
      search2: function() {

        axios.get('/api/plan-market/message/export?page=' + this.page + '&page_size=' + this.pagesize +
            '&class=' + this.classs + '&name=' + this.name + '&mobile=' + this.mobile + '&start=' + this.start +
            '&end=' + this.end + '&status='+this.status)
          .then(response => {
            if (response.data.msg.code == 0) {
              this.$message.success('已申请导出，请点击 “查看导出文件” 查看');
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
      daochujilu:function(){
        axios.get('/api/plan-market/export/message/log')
          .then(response => {
            if (response.data.msg.code == 0) {
              this.list2 = response.data.data.data

              this.log = true
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
      xiazai:function(url){
        console.log(window.location.origin+'/'+url)
        
        window.location.href = window.location.origin+'/'+url
      },

      //翻页
      fanye: function(page) {
        this.loading = true
        this.page = page
        this.getlist()
      },
      //获取列表
      getlist: function() {
        var that = this
        axios.get('/api/plan-market/message/getduanxinjilu?page=' + this.page + '&page_size=' + this.pagesize +
            '&class=' + this.classs + '&name=' + this.name + '&mobile=' + this.mobile + '&start=' + this.start +
            '&end=' + this.end + '&status='+this.status)
          .then(response => {
            if (response.data.msg.code == 0) {
              that.list = response.data.data.data
              that.total = response.data.data.total
              that.loading = false
            } else {
              that.$message.error(response.data.msg.info);
            }
          })
      },
    }
  }
</script>

<style lang="scss" scoped>
  .index {


        .title {
          border-bottom: 1px #EAEAEA solid;
          line-height: 45px;
          padding-left: 30px;
          font-size: 16px;
          background: #F9F9F9;
          color: #727272
        }

      /deep/ .el-button--danger {
          color: #FFF;
          background-color: #2974FF;
          border-color: #2974FF;
      }

      .powertop {
      	display: flex;
      	background:#f9f9f9;
      }

      .powertopli {
        flex-basis: 180px;
        line-height: 50px;
        border-bottom: 3px #F9F9F9 solid;
        color: #727272;
        border-right: 1px #F9F9F9 solid;
        font-size: 16px;
        text-align: center;
      }

      .powertopact {
        background: #FFFFFF;
        border-bottom: 3px #2974FF solid;
      }

      .conlist {
        padding-bottom: 20px;
        background: #FFFFFF;
        min-height: 800px;

        .flex {
          display: flex;
          flex-wrap: wrap;
        }

        .flexbt {
          justify-content: space-between;
        }

        .renguantop {
          padding: 20px;
          padding-bottom: 10px;


          .jiediand {
            font-size: 16px;
            line-height: 30px;
            margin-right: 20px;
          }

          .jiedianx {
            font-size: 14px;
            color: #F1A533;
            line-height: 35px;
          }

          .duanxinn {
            color: #B8B8B8;
            line-height: 35px;
            margin-right: 10px;
          }

          .duanxinu {
            color: #DF3434;
            line-height: 35px;
            margin-right: 10px;
          }

          .duanxinb {
            background: #EEF7FF;
            line-height: 35px;
            color: #FFFFFF;
            padding: 0 10px;
            border-radius: 3px;
          }
        }

        .xinjianrenwu {
          padding: 20px;
        }

        .list {
        	text-align: center; padding: 0 20px;
        	line-height: 60px;

        	.th {
        		flex: 1;
        		background: rgb(246, 246, 246);
            color: rgb(86, 86, 86); font-size: 14px; line-height: 45px;
        	}

        	.td {
        		flex: 1;
        		border-bottom: 1px #EAEAEA solid;
        		height: 60px;
            line-height: 60px;
        		overflow: hidden; font-size: 14px;
        	}
        }
      }

  }
</style>
